<template>
  <view class="my-purse-counter">
    <u-navbar
      @leftClick="leftClick"
      @rightClick="rightClick"
      title=""
      bgColor="#f3f4f7"
      rightText="收支明细"
      leftIconColor="#000"
    />
    <view class="purse-counter-content">
      <view class="content-title">我的钱包</view>
      <view class="purse-money-show">
        <view class="available-balance">
          <text class="balance-title">可用余额（元）</text>
          <text class="balance-money">{{ walletObj.availableAmount || 0 }}</text>
        </view>
        <view class="balance-sort-main">
          <view class="available-balance">
            <view class="balance-title available"
              >总余额
              <text
                class="iconfont icon-question-circle"
                @click="showTotalPriceExplainPopup = true"
              ></text
            ></view>
            <text class="available-money">{{ walletObj.balance || 0 }}</text>
          </view>
          <view class="available-balance">
            <view class="balance-title available"
              >冻结余额 <text class="iconfont icon-arrow_right"></text
            ></view>
            <text class="available-money">{{ walletObj.freezeAmount || 0 }}</text>
          </view>
        </view>
        <!-- 提现 -->
        <view class="withdraw-counter">
          <text>提现</text>
          <text class="iconfont icon-arrow_right"></text>
        </view>
      </view>

      <!-- 红包奖励 -->
      <view class="envelope-reward">
        <view class="envelope-title">
          <text class="iconfont icon-purse"></text>
          <text class="title">红包奖励</text>
        </view>
        <!--  -->
        <view class="enveloper-content-counter">
          <view class="enveloper-items">
            <view class="items-top-explain">
              <text class="iconfont icon-wait_claimed"></text>
              <text class="explain-text">待领取奖励</text>
            </view>
            <view class="items-data-num">
              <text class="data-num">0</text>
              <view class="right-arrow-unit">
                <text>个</text>
                <text class="iconfont icon-arrow_right"></text>
              </view>
            </view>
          </view>
          <view class="enveloper-items">
            <view class="items-top-explain unlocked-top">
              <text class="iconfont icon-unlocked"></text>
              <text class="explain-text">待解锁奖励</text>
              <text class="iconfont icon-question-circle"></text>
            </view>
            <view class="items-data-num unlocked-num">
              <text class="data-num">0</text>
              <view class="right-arrow-unit">
                <text>元</text>
                <text>（0个）</text>
                <text class="iconfont icon-arrow_right"></text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 银行卡/收入 -->
      <view class="bank-card-counter">
        <view class="bank-card-items" @click="handleControlBankCard">
          <text class="iconfont icon-bank_card"></text>
          <view class="items-content">
            <view class="items-explain-title">银行卡</view>
            <view class="right-content">
              <text class="password">设置密码</text>
              <text class="iconfont icon-arrow_right"></text>
            </view>
          </view>
        </view>
        <view class="bank-card-items">
          <text class="iconfont icon-withdrawal"></text>
          <view class="items-content" @click="handleRecord">
            <view class="items-explain-title">提现记录</view>
            <view class="right-content">
              <text class="password withdrawal">流水明细</text>
              <text class="iconfont icon-arrow_right"></text>
            </view>
          </view>
        </view>
        <view class="bank-card-items">
          <text class="iconfont icon-income"></text>
          <view class="items-content" @click="handleControlCertificate">
            <view class="items-explain-title">收入证明</view>
            <view class="right-content">
              <view class="income-right-text">
                <text class="top-explain">申请收入证明</text>
                <text class="time-explain">每日8:00-24:00开放</text>
              </view>
              <text class="iconfont icon-arrow_right"></text>
            </view>
          </view>
        </view>
      </view>
      <!-- 钱包密码 -->
      <view class="purse-password">
        <text class="iconfont icon-purse_lock"></text>
        <view class="items-content" @click="handleUpdatePassword">
          <view class="items-explain-title">钱包密码</view>
          <view class="right-content">
            <text class="pure-pwd">修改钱包密码</text>
            <text class="iconfont icon-arrow_right"></text>
          </view>
        </view>
      </view>

      <image
        src="https://cdn.uviewui.com/uview/album/1.jpg"
        class="pure-image"
      />
      <view class="pure-explain">
        帮手达钱包是帮手达为所有师傅提供的电子账户，可实现交易、余额查询和提现功能，你在帮手达所有订单的收入都存入钱包。帮手达为您钱包账户提供全程资金安全保障。
      </view>
    </view>
    <!-- 总余额说明 -->
    <u-popup
      :show="showTotalPriceExplainPopup"
      :round="4"
      mode="center"
      @close="handleCloseTotalPricePopup"
    >
      <view class="total-price-popup-counter">
        <view class="total-price-title">账户总余额说明 </view>
        <view class="explain-content">账户总余额=可用余额+冻结余额</view>
        <view class="know-btn" @click="showTotalPriceExplainPopup = false"
          >知道了</view
        >
      </view>
    </u-popup>
    <!-- 银行卡 未设置密码时弹窗 -->
    <u-popup
      :show="showCardSetPwdPopup"
      :round="4"
      mode="center"
      @close="handleCloseCardSetPwdPopup"
      :customStyle="{
        width: '90%',
      }"
    >
      <view class="card-set-password">
        <view class="card-explain"
          >您当前没有设置钱包密码，咱不能绑定银行卡，请设置支付密码后再绑定</view
        >
        <view class="set-know-btn" @click="handleGoSetting">去设置</view>
        <view class="know-got-it" @click="showCardSetPwdPopup = false"
          >知道了</view
        >
      </view>
    </u-popup>
    <!-- 收入证明 -->
    <certificate-popup :show.sync="showCertificate"></certificate-popup>
  </view>
</template>

<script>
import CertificatePopup from './components/CertificatePopup.vue';
import { wallet } from '../../../api/auth';
export default {
  components: {
    CertificatePopup
  },
  data() {
    return {
      showTotalPriceExplainPopup: false, // 总余额说明弹窗
      showCardSetPwdPopup: false, //
      showCertificate: false, // 收入证明
      walletObj: {}
    };
  },
  mounted() {
    this.getPriceWallet();
  },
  methods: {
    // 获取钱包
    async getPriceWallet() {
      try {
        const res = await wallet();
        console.log(res,'wallet');
        this.walletObj = res.data;
      } catch(e) {
        console.log(e);
      }
    },
    leftClick() {
      uni.navigateBack();
    },
    // navbar收支明细
    rightClick() {
      uni.navigateTo({
        url: '/pages/drawerPage/purse/incomeDetail'
      })
    },
    // 关闭总余额提示
    handleCloseTotalPricePopup() {
      this.showTotalPriceExplainPopup = false;
    },
    handleCloseCardSetPwdPopup() {
      this.showCardSetPwdPopup = false;
    },
    // 银行卡
    handleControlBankCard() {
      this.showCardSetPwdPopup = true;
    },
    // 去设置
    handleGoSetting() {
      uni.navigateTo({
        url: "/pages/drawerPage/purse/updatePursePassword",
      });
      this.showCardSetPwdPopup = false;
    },
    // 修改钱包密码
    handleUpdatePassword() {
      uni.navigateTo({
        url: "/pages/drawerPage/purse/updatePursePassword",
      });
    },
    // 收入证明
    handleControlCertificate() {
      this.showCertificate = true
    },
    // 提现记录
    handleRecord() {
      uni.navigateTo({
        url: '/pages/drawerPage/purse/withdrawalRecord'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.my-purse-counter {
  height: 100vh;
  background: #f3f4f7;
  overflow: auto;
  .purse-counter-content {
    margin-top: 88rpx;
    padding: 16rpx;
    .content-title {
      font-size: 28rpx;
      color: #333;
    }
    .purse-money-show {
      padding: 32rpx;
      background: #0f2e9e;
      border-radius: 16rpx;
      margin-top: 28rpx;
      position: relative;
      .available-balance {
        display: flex;
        flex-direction: column;
        .balance-title {
          font-size: 24rpx;
          color: #c0cefb;
        }
        .balance-money {
          font-size: 64rpx;
          color: #fff;
          font-weight: 500;
        }
        .available-money {
          font-size: 30rpx;
          color: #fff;
          margin-top: 6rpx;
        }
      }
      .available {
        display: flex;
        align-items: center;
        gap: 8rpx;
        .con-question-circle {
          font-size: 22rpx;
        }
        .icon-arrow_right {
          font-size: 24rpx;
        }
      }
      .balance-sort-main {
        margin-top: 52rpx;
        display: flex;
        align-items: flex-start;
        gap: 180rpx;
      }

      .withdraw-counter {
        position: absolute;
        top: 100rpx;
        right: 0;
        padding: 18rpx 24rpx 18rpx 48rpx;
        display: flex;
        align-items: center;
        background: #794554;
        color: #b98c99;
        font-size: 26rpx;
        border-radius: 50rpx 0 0 50rpx;
        .icon-arrow_right {
          color: #b98c99;
          font-size: 22rpx;
        }
      }
    }

    .envelope-reward {
      margin-top: 16rpx;
      padding: 24rpx;
      background: #fff;
      border-radius: 16rpx;
      .envelope-title {
        display: flex;
        align-content: center;
        gap: 18rpx;
        .icon-purse {
          font-size: 46rpx;
          color: #de4838;
        }
        .title {
          color: #de4838;
          font-size: 38rpx;
          font-weight: bold;
        }
      }
      .enveloper-content-counter {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .enveloper-items {
          width: 48%;
          box-sizing: border-box;
          padding: 24rpx 24rpx 32rpx 24rpx;
          background: #fcf7f2;
          border-radius: 12rpx;
          .items-top-explain {
            display: flex;
            align-items: center;
            gap: 12rpx;
            .icon-wait_claimed {
              font-size: 32rpx;
              color: #f2ceb6;
            }
            .explain-text {
              font-size: 26rpx;
              color: #f2ceb6;
            }
          }
          .items-data-num {
            margin-top: 48rpx;
            display: flex;
            // align-items: flex-end;
            .data-num {
              font-size: 56rpx;
              color: #de9148;
              font-weight: 500;
              line-height: 0;
            }
            .right-arrow-unit {
              display: flex;
              align-items: center;
              margin-top: 10rpx;
              text {
                font-size: 26rpx;
                color: #de9148;
                line-height: 0;
              }
              .icon-arrow_right {
                font-size: 20rpx;
              }
            }
          }
          .unlocked-top {
            .icon-unlocked,
            .explain-text,
            .icon-question-circle {
              color: #f3c6c5;
            }
          }
          .unlocked-num {
            .data-num {
              color: #e46969;
            }
            .right-arrow-unit {
              text {
                color: #e46969;
              }
            }
          }
        }
      }
    }
    .bank-card-counter {
      padding: 24rpx;
      background: #fff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      .bank-card-items {
        display: flex;
        align-items: center;
        gap: 24rpx;
        .icon-bank_card,
        .icon-withdrawal,
        .icon-income {
          font-size: 42rpx;
          color: #89b3e1;
        }
        .items-content {
          flex: 1;
          padding: 36rpx 0;
          border-bottom: 2rpx solid #f1f1f1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .items-explain-title {
            font-size: 32rpx;
            color: #333;
          }
          .right-content {
            display: flex;
            align-items: center;
            gap: 4rpx;
            .password {
              color: #cf5959;
              font-size: 24rpx;
            }
            .icon-arrow_right {
              font-size: 24rpx;
              color: #999;
            }
            .withdrawal {
              color: #999;
            }
            .income-right-text {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              gap: 8rpx;
              .top-explain {
                font-size: 24rpx;
                color: #000;
              }
              .time-explain {
                font-size: 24rpx;
                color: #999;
              }
            }
          }
        }
      }
    }
    .purse-password {
      padding: 36rpx 24rpx;
      background: #fff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      gap: 24rpx;
      .icon-purse_lock {
        font-size: 42rpx;
        color: #89b3e1;
      }
      .items-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .items-explain-title {
          font-size: 32rpx;
          color: #333;
        }
        .right-content {
          display: flex;
          align-items: center;
          gap: 4rpx;
          .pure-pwd {
            font-size: 24rpx;
            color: #999;
          }
          .icon-arrow_right {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
    .pure-image {
      width: 100%;
      height: 160rpx;
      margin: 20rpx auto 0 auto;
    }
    .pure-explain {
      width: 100%;
      margin-top: 28rpx;
      font-size: 26rpx;
      color: #999;
      line-height: 44rpx;
    }
  }

  .total-price-popup-counter {
    padding: 60rpx 120rpx;
    box-sizing: border-box;
    .total-price-title {
      font-size: 32rpx;
      color: #333;
      text-align: center;
    }
    .explain-content {
      text-align: center;
      font-size: 28rpx;
      color: #999;
      margin-top: 32rpx;
    }
    .know-btn {
      width: 380rpx;
      padding: 28rpx 0;
      background: #50aee8;
      border-radius: 8rpx;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      box-sizing: border-box;
      margin: 42rpx auto 0 auto;
    }
  }

  .card-set-password {
    padding: 60rpx;
    box-sizing: border-box;
    .card-explain {
      font-size: 32rpx;
      color: #333;
    }
    .set-know-btn {
      width: 562rpx;
      padding: 28rpx 0;
      background: #50aee8;
      border-radius: 8rpx;
      text-align: center;
      box-sizing: border-box;
      margin: 42rpx auto 0 auto;
      color: #fff;
    }
    .know-got-it {
      text-align: center;
      margin-top: 42rpx;
      color: #9999;
      font-size: 28rpx;
      font-weight: 500;
    }
  }
}
</style>
